<template>
  <div v-resize="onResize">
    <div class="ana-detail-title">
      <a-icon type="forward" />神经系统症状
    </div>
    <div style="width: 100%; height: 300px" ref="chart"></div>
  </div>
</template>

<script>
import { ChartUtils } from "@/utils/chart";
import AttrSelect from "../utils/AttrSelect.vue";
import { isString } from "@/utils/utils";

const chartUtils = new ChartUtils();

export default {
  components: { AttrSelect },
  data() {
    return {
      key: "神经系统",
      // step: 1 * 24 * 3600,
      tableData: [],
    };
  },
  props: {
    chartData: Array,
    defaultKey: String,
    width: {
      type: Number,
      default: 600,
    },
    height: {
      type: Number,
      default: 300,
    },
  },
  watch: {
    key: function (v, o) {
      this.resetOpt();
    },
    chartData: function (v, o) {
      this.resetOpt();
    },
  },
  methods: {
    async init() {
      chartUtils.dom = this.$refs.chart;
      chartUtils.init();

      let option = this.getOption();
      chartUtils.setOption(option);
    },
    filterFunc(k, v) {
      return isString(v);
    },
    getOption() {
      let data = this.reproject();
      let option = {
        // title: {
        //   text: "",
        //   //   subtext: "纯属虚构",
        // },
        // tooltip: {
        //   trigger: "axis",
        // },
        legend: {
          data: ["发病人数"],
        },
        toolbox: {
          show: true,
          feature: {
            // dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ["line", "bar"] },
            // restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: data.map((v) => v.label),
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "人数",
            type: "bar",
            data: data.map((v) => v.value),
            label: {
              show: true,
            },
            // markPoint: {
            //   data: [
            //     { type: "max", name: "最大值" },
            //     { type: "min", name: "最小值" },
            //   ],
            // },
            // markLine: {
            //   data: [{ type: "average", name: "平均值" }],
            // },
          },
        ],
      };
      return option;
    },
    reproject() {
      let data = this.chartData.map((v) => v[this.key]);

      data = data.reduce(function (time, name) {
        if (name in time) {
          time[name]++;
        } else {
          time[name] = 1;
        }
        return time;
      }, {});

      let reproject = [];
      // let tableData = [];
      Object.keys(data).forEach((k) => {
        reproject.push({
          label: k === 'undefined' ? '无症状':k,
          value: data[k],
          rr: (data[k] / this.chartData.length).toFixed(4),
        });
      });
      this.tableData = reproject;
      return reproject;
    },

    resetOpt() {
      let option = this.getOption();
      // console.log(option);
      chartUtils.setOption(option);
    },

    onResize() {
      chartUtils.onResize();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
</style>